<template>
    <div class="rejectionBox">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item>驳回类目管理</el-breadcrumb-item>
        </el-breadcrumb>
        <span class="labelTit">驳回原因分类：</span>
        <el-select v-model="rejectReson">
                <el-option v-for="item in reasons"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                >
                </el-option>
        </el-select>
        <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="adddialog">新增</el-button>
        <el-table :data="tableData" v-loading="loading" border style="margin-top:15px;">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column  label="驳回原因分类" prop="rejectReason" align="center"></el-table-column>
            <el-table-column  label="内容" align="center">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.isContent==0" disabled >{{scope.row.isContent}}</el-button>
                <el-button type="text" v-if="scope.row.isContent !=0" @click="jumpCatory(scope.row.id)">{{scope.row.isContent}}</el-button>
              </template>
            </el-table-column>
            <el-table-column  label="操作人" prop="operatorName" align="center"></el-table-column>
            <el-table-column  label="操作时间" prop="updateTime" align="center" :formatter="initTime"></el-table-column>
            <el-table-column  label="当前状态" prop="state" align="center" :formatter="initState"></el-table-column>
            <el-table-column  label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button type="text" :disabled="scope.row.state != 1 " @click="editrejection(scope.row)">编辑</el-button>
                    <el-button type="text" :disabled="scope.row.state != 1 " @click="carryOut(scope.row.id,0)">执行</el-button>
                    <el-button type="text" :disabled="scope.row.state != 0 " @click="rescind(scope.row.id,1)">撤销</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10,30,50,100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" style="margin-top:30px;">
         </el-pagination>
         <el-dialog :title="type=='add' ? '添加驳回原因分类' :'编辑驳回原因分类'   " :visible.sync="dialogVisible" width="40%">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                 <el-form-item label="驳回模块选择：" prop="rejectType">
                     <el-select v-model="ruleForm.rejectType">
                             <el-option v-for="item in rejectTypes"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value"
                             >
                             </el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="驳回原因分类：" prop="rejectReason">
                     <el-input v-model.trim="ruleForm.rejectReason" placeholder="请输入" style="width:400px;" maxlength="25"></el-input>
                 </el-form-item>
                 
                 <el-form-item >
                    <el-button type="primary" @click="confirmDialog">确定</el-button>
                    <el-button type="primary" @click="cancelDialog">取消</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
    </div>
</template>

<script>
import utils from "../../../common/utils"
import api from '@/api/apiPath'
export default {
    title:'驳回类目管理',
    data(){
        return {
            editId:"",
            dialogVisible:false,
            type:"",
            reasons:[],
            rejectReson:"",
            pageNum:1,
            pageSize:10,
            total:0,
            tableData:[],
            loading:false,
            rejectTypes:[
                {label:"客户跟进",value:0}
            ],
            ruleForm:{
                rejectType:"",
                rejectReason:""
            },
            rules:{
                rejectType:[
                    {required: true,message: '请选择驳回模块', trigger: 'change'}
                ],
                rejectReason:[
                    {required: true,message: '请输入驳回原因', trigger: 'blur'}
                ],
                isContent:[
                    {required: true,message: '请选择有无内容', trigger: 'change'}
                ]
            }
        }
    },
    methods:{
        jumpCatory(id){
          this.$router.push({
            path:"/rejectionreason",
            query:{
              id:id
            }
          })
        },
        editrejection(data){
            this.dialogVisible=true;
            this.type="edit";
            this.editId=data.id;
            this.ruleForm.rejectType=data.rejectType;
            this.ruleForm.rejectReason=data.rejectReason;
        },
        carryOut(id,state){
            this.operate(id,state)
        },
        rescind(id,state){
            this.$confirm("确认撤销该条记录？","提示",{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.operate(id,state)
            }).catch(()=>{

            })
        },
        operate(id,state){
            let params={};
            params.id=id;
            params.state=state;
            this.axios.post(api.rejectionOperate,params).then((res)=>{
                if(res.data.code==200){
                    this.$alert("操作成功", '提示', {
                            type: 'success',
                            confirmButtonText: '确定',
                            callback: action => {
                                 this.loadData();
                             }
                    });
                }
            })
        },
        loadList(){
          this.axios.get(api.rejectionCatoryList).then((res)=>{
              if(res.data.code==200){
                  this.reasons=res.data.data;
                  this.reasons.unshift({value:"全部",key:0})
              }
          }).catch((error)=>{
              console.log(error)
          })
        },
        initTime(row, column, cellValue, index){
            return utils.getTimeString(cellValue)
        },
        initType(row, column, cellValue, index){
            if(cellValue==0){return "客户跟进"}
        },
        initState(row, column, cellValue, index){
            if(cellValue==0){return "执行中"}
            if(cellValue==1){return "已撤销"}
        },
        warn(msg) {
            this.$alert(msg, '提示', {
                type: 'error',
                confirmButtonText: '确定',
                callback: action => {
                }
            });
        },
        loadData(){
           let params={};
           params.id=this.rejectReson;
           params.pageNum=this.pageNum;
           params.pageSize=this.pageSize;
           this.loading=true;
           this.axios.post(api.rejectionCatory,params).then((res)=>{
               console.log(res);
               if(res.data.code==200){
                   this.tableData=res.data.data.list;
                   this.total=res.data.data.total;
                   this.loading=false;
               }else{
                   this.warn(res.data.msg)
               }
           }).catch((error)=>{
               console.log(error)
           })
        },
        query(){
            this.pageNum=1;
            this.loadData();
        },
        adddialog(){
            this.ruleForm.rejectType=0;
            this.ruleForm.rejectReason="";
            this.dialogVisible=true;
            this.type="add";
        },
        confirmDialog(){
            this.$refs["ruleForm"].validate((valid)=>{
              if(!valid){
                return
              }
              if(this.type=="add"){
                this.axios.post(api.addRejectionCatory,this.ruleForm).then((res)=>{
                    if(res.data.code==200){
                        this.$alert("操作成功", '提示', {
                                type: 'success',
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.dialogVisible=false;
                                    this.loadList();
                                    this.loadData();
                                 }
                        });
                    }else{
                        this.warn(res.data.msg)
                    }
                }).catch((error)=>{
                    console.log(error);
                })
              }else{
                  let params={};
                  params.id=this.editId;
                  params.rejectType=this.ruleForm.rejectType;
                  params.rejectReason=this.ruleForm.rejectReason;
                  this.axios.post(api.updateRejectionCatory,params).then((res)=>{
                      if(res.data.code==200){
                          this.$alert("操作成功", '提示', {
                                  type: 'success',
                                  confirmButtonText: '确定',
                                  callback: action => {
                                      this.dialogVisible=false;
                                       this.loadData();
                                       this.loadList();
                                   }
                          });
                      }else{
                          this.warn(res.data.msg)
                      }
                  }).catch((error)=>{
                      console.log(error);
                  })
              }
            })
        },
        cancelDialog(){
            this.dialogVisible=false;
        },
        handleSizeChange(val){
            this.pageSize=val;
            this.loadData();
        },
        handleCurrentChange(val){
            this.pageNum=val;
            this.loadData();
        },
    },
    mounted(){
        this.loadList();
        this.loadData();
    },
    activated(){
      this.query()
    }
}
</script>

<style lang="css" >
    .rejectionBox .labelTit{
        font-size: 14px;
    }
</style>
